<template>
  <el-tree-select
    v-model="modelValue"
    :data="data"
    :render-after-expand="true"
    :show-checkbox="showCheckbox"
    multiple
    :default-expand-all="defaultExpandAll"
    :filterable="filterable"
    :placeholder="placeholder"
    :style="style"
    ref="treeSelect"
    :clearable="clearable"
    @check-change="nodeClick"
    @clear="clear"
    class="component-tree-select"
  />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

const props = defineProps({
  modelValue: {
    type: Object,
    default: function () {
      return {};
    }
  },
  data: {
    type: Object,
    default: function () {
      return {};
    }
  },
  placeholder: {
    type: String,
    default: ''
  },
  showCheckbox: {
    type: Boolean,
    default: true
  },
  style: {
    type: Object,
    default: function () {
      return {};
    }
  },
  clearable: {
    type: Boolean,
    default: true
  },
  defaultExpandAll: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: true
  }
});

const treeSelect = ref(null);

const emit = defineEmits(['update:modelValue']);

const modelValue = computed<object | undefined>({
  get: () => props.modelValue,
  set: value => {
    let tree = (treeSelect as any).value;
    if (null != tree) {
      let keys = tree.getCheckedKeys();
      emit('update:modelValue', keys);
    }
  }
});

const data = computed<object | undefined>({
  get: () => props.data,
  set: value => {}
});

const clear = function () {
  emit('update:modelValue', []);
};
const nodeClick = () => {
  // let element = document.getElementsByClassName('el-select-tags-wrapper');
  // if (element) {
  //   if (element.scrollTop + element.clientHeight == element.scrollHeight) {
  //     console.log('已经到底部了');
  //   } else {
  //     // 300 代表每次移动300px
  //     element.scrollTop += element.scrollHeight - element.clientHeight;
  //   }
  // }
};
</script>

<style lang="scss" scope>
.el-form-item {
  display: flex;
  align-items: center;
}
.el-select {
  max-height: 200px;
  .el-select-tags-wrapper {
    max-height: 110px;
    overflow: scroll;
    -ms-overflow-style: none; /* 针对IE、Edge浏览器 */
    scrollbar-width: none; /* 针对Firefox浏览器 */
  }
  .el-select-tags-wrapper .has-prefix::-webkit-scrollbar {
    display: none; /* 针对Webkit浏览器，如Chrome、Safari */
  }
}
</style>
